<template>
  <div id="app">
    <el-container>
      <el-header height="82px">
        <div class="indexheader">
          <el-image
            src="images/headimg.png"
            fit="fill"
            lazy
            @click="indexReturn"
          ></el-image>
          <div class="nologin" :style="touxiang">
            <el-avatar style="margin-top:-10px" size:50> {{ $route.query.input1 }} </el-avatar>
            <div class="destroy" style="margin=left: 5px;float:right">
           <a href="http://localhost:8080/">注销</a>
            </div>
          </div>
          <div class="nologin" :style="loginstyle">
            <router-link to="/login" style="color: #004999"> 登录</router-link>
            <router-link to="/register">注册</router-link>
            <a
              :style="searchstyle"
              href="http://localhost:8086/"
              target="_blank"
            >
              后台中心</a
            >
          </div>
          <div class="search" :style="searchstyle">
            <!-- <el-input placeholder="请输入搜索关键字" v-model="input">
              <el-button slot="append" icon="el-icon-search">搜索</el-button>
            </el-input> -->
          </div>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
      <div class="pagefooter">
        <el-footer height="50px">
          <p>
            地址：江西省南昌市联微有限公司 电话：xxx-xxxxx 赣ICP备1111111号
            传真：xxx-xxxx 法律声明
          </p>
          <p>
            Copyright@2016 思创一班第五组 ALL Rights Reserved
            技术支持：思创一班第五组
          </p>
        </el-footer>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      touxiang: "display:none",
      loginstyle: "display:inline",
      input: "",
      searchstyle: "display:inline",
      all: "display:inline",
    };
  },
  methods: {
    pagechange() {
      // console.log(this.$route.query);
      if (this.$route.query.input1 == "111") {
        console.log(1);
        this.loginstyle = "display:none";
        this.touxiang = "display:inline";
      }
      switch (this.$route.name) {
        case "index":
          this.searchstyle = "display:inline";
          break;
        case "login":
          this.searchstyle = "display:none";
          break;
        case "register":
          this.searchstyle = "display:none";
          break;
        default:
          console.log("无");
          break;
      }
    },
    indexReturn() {
      this.$router.replace({
        name: "index",
      });
    },
    //   destroy(){
    //   this.$router.push({
    //     name:'index',
    //     query:{
    //       input1:'',
    //       input2:'',
    //     }
    //   })
    // }
  },
  watch: {
    $route: "pagechange",
  },
};
</script>

<style>
body {
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
.indexheader {
  width: 1200px;
  margin: 0px auto;
}
.indexheader .el-image {
  float: left;
}
.search {
  width: 319px;
  height: 40px;
  margin-top: 12px;
  float: right;
}
.search .el-input__inner {
  border-radius: 40px;
}
.search .el-input-group__append {
  border-radius: 40px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: #004999;
  font-size: 16px;
}
.nologin {
  float: right;
  line-height: 18px;
  margin-left: 36px;
  margin-top: 23px;
}
.nologin a:last-child,
.nologin a:nth-child(2) {
  padding-left: 16px;
  margin-left: 16px;
  border-left: 2px solid #447ab4;
  color: #004999;
}
#app .el-main {
  padding: 0px;
}
#app .el-header {
  padding-top: 9px;
}
.pagefooter {
  padding: 20px;
  background: #404040;
  color: white;
  text-align: center;
  font-size: 14px;
}
/* .no{
  display: none;
}
.yes{
  display: block;
} */
</style>
